<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>PC</title>
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/intro.js/3.3.1/introjs.css"
    />
    <link rel="stylesheet" href="../build/template-1.css" />
  </head>

  <body>
    <input id="upload" type="file" accept="image/png,image/jpeg" />
    <button id="update">组件更新</button>

    <script src="../build/index.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/intro.js/3.3.1/intro.min.js"></script>
    <script>
      window.onload = function() {
        var simpleCrop = new SimpleCrop({
          title: "图片裁剪",
          src: "../img/test2.jpg",
          size: {
            width: 800,
            height: 600,
          },
          cropSizePercent: 0.6,
          funcBtns: ["close", "crop", "reset"],
          borderColor: "#fff",
          coverColor: "rgba(0,0,0,.5)",
          startAngle: -360,
          endAngle: 360,
          cropCallback: function($resultCanvas) {
            console.log("cropCallback");
            $resultCanvas.style.marginRight = "10px";
            $resultCanvas.style.width = "50%";
            document.body.appendChild($resultCanvas);
          },
          uploadCallback: function(src) {
            console.log("uploadCallback " + src);
          },
          closeCallback: function() {
            console.log("closeCallback");
          },
        });

        // 新手指引
        introJs()
          .setOptions({
            nextLabel: "下一步",
            prevLabel: "上一步",
            doneLabel: "知道啦",
            steps: [
              {
                element: document.querySelector(
                  "#" + simpleCrop.id + " .crop-mask"
                ),
                intro: "滑动鼠标滚轮进行放大或者缩小",
              },
              {
                element: document.querySelector(
                  "#" + simpleCrop.id + " .crop-rotate"
                ),
                intro: "水平滑动刻度条进行左右旋转",
              },
              {
                element: document.querySelector(
                  "#" + simpleCrop.id + " .crop-reset"
                ),
                intro: "点击重置，让图片恢复初始状态",
              },
              {
                element: document.querySelector(
                  "#" + simpleCrop.id + " .crop-btn"
                ),
                intro: "点击确定，完成图片裁剪",
              },
            ],
          })
          .start();

        // 选取裁剪图片;
        var $upload = document.querySelector("#upload");
        $upload.addEventListener("change", function(evt) {
          var files = evt.target.files;
          if (files.length > 0) {
            simpleCrop.show(files[0]);
          }
          $upload.value = ""; //清空 input value属性
        });

        //组件更新
        var $update = document.querySelector("#update");
        $update.addEventListener("click", function() {
          simpleCrop.updateBox({
            cropSizePercent: 0.7,
            size: {
              width: 600,
              height: 600,
            },
          });
          simpleCrop.initBoxBorder({
            borderColor: "#0BFF00",
          });
          simpleCrop.show();
        });
      };
    </script>
  </body>
</html>
